<template>
  <div class="CustomerList">
    <!-- header -->
    <new-header title="作业历史" />
    <!-- 4个选择 -->
    <div class="center">
      <div class="top">
        <!-- 班级选择 -->
        <div class="class-body">
          <span class="name">班级选择:</span>
          <div class="right">
            <span
              v-for="item of this.classList"
              :key="item.id"
              :class="{'active':active_class === item.id}"
              class="right-btn"
              @click="change_class(item.id)"
            >{{ item.className }}</span>
          </div>
        </div>
        <el-button type="success" size="medium" class="btn" @click="go_to_add">布置作业</el-button>
      </div>

      <div class="table">
        <!-- table -->
        <el-table
          :header-cell-style="{background:'#f0f2f5',color:'black'}"
          class="table"
          :data="table_list"
          style="width: 100%"
          fit
          highlight-current-row
          min-height="650"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="date"
            label="日期"
          />
          <el-table-column
            align="center"
            fixed
            prop="className"
            label="班级名称"
          >
            <template slot-scope="scope">
              <p class="name_word">{{ scope.row.className }}</p>
            </template>
          </el-table-column>
          <!-- :show-overflow-tooltip="true" -->
          <el-table-column

            prop="content"
            label="作业内容"
          />
          <!-- <el-table-column
            prop="avgEffectiveTime"
            label="课堂时常"
            min-width="100"
          /> -->
          <el-table-column
            prop="totalStudent"
            label="班级人数"
          />
          <el-table-column
            prop="totalSuccessStudent"
            label="完成人数"
          />
          <el-table-column
            prop="avgEffectiveTime"
            label="平均有效运动时长"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">

              <div
                class="btn-item"
                @click="go_to_detail(scope.row)"
              >详情</div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="pagin"
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="this.size"
          layout="prev, pager, next, sizes,  jumper,total"
          :total="this.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>
</template>

<script>
import Index from '@/api/index.js'
import HomeWork from '@/api/homeWork.js'
import NewHeader from '@/components/NewHeader.vue'
export default {
  name: 'WorkHistory',
  components: {
    NewHeader
  },
  data() {
    return {
      active_class: 0,
      currentPage: 1,
      size: 10,
      total: 100,
      textarea2: '',
      table_list: [],
      ClassID: 0,
      classList: []
    }
  },
  mounted() {
    this.HomeWorkList()
    this.GetBatchBind()
  },
  methods: {
    change_class(index) {
      this.active_class = index
      this.ClassID = index
      this.HomeWorkList()
    },
    go_to_add() {
      this.$router.push({ path: '/work/work-add' })
    },
    go_to_detail(item) {
      console.log(item)
      this.$router.push({ path: '/work/work-history-detail/' + item.id,
        query: {
          date: item.date
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      // alert(`你选择了${val}`)
    },
    async GetBatchBind() {
      const result = await Index.GetBatchBind() // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.classList = result.result.classList
      }
    },
    async HomeWorkList() {
      const data = {
        ClassID: this.ClassID,
        size: this.size,
        Page: this.currentPage
      }
      const result = await HomeWork.HomeWorkList(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.table_list = result.result.result
        this.currentPage = result.result.page
        this.total = result.result.total
      }
    },
    // get_customer_list() {
    //   new Promise((resolve, reject) => {
    //   /* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
    //     setTimeout(() => {
    //     /* 因无真实数据，当前方法模拟数据 */
    //       const list = []

    //       for (let i = this.currentPage * this.size; i < this.size * (this.currentPage + 1); i++) {
    //         list.push({
    //           number: i,
    //           name: `班级${i + 1}`,
    //           sex: '35:44',
    //           time: new Date().getTime(),
    //           work: `第${i + 1}`,
    //           belong: `第${i + 1}`,
    //           db: `达标${i + 1}`
    //         })
    //       }

    //       // 将请求接口返回的数据传递给 Promise 对象的 then 函数。
    //       resolve({ list })
    //     }, 1000)
    //   }).then(res => {
    //     console.log(res)
    //     // this.total = res.list.length
    //     this.table_list = res.list
    //   })
    // },
    // 页面size改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.HomeWorkList()
    },
    // 页面page改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.HomeWorkList()
    }

  }
}
</script>

<style lang="scss" scoped>
.btn-item{
  color: #1890FF;
}
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #1890FF;
      font-size: 14px;
    }

  }

}
.CustomerList{
  position: relative;
  padding: 25px;

  .center{
    padding: 25px;
    background-color: white;
    .top{
      overflow: hidden;
      .btn{
        float: right;
      }
    }
  }
}
.class-body{
  float: left;
  display: flex;
  margin-bottom: 25px;
  margin-right: 20px;
  .name{
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 36px;
    padding-right: 20px;
  }
  .right{
    display: flex;
    .right-btn{
      user-select: none;
      cursor: pointer;
      margin-right: 10px;
      height: 36px;
      line-height: 36px;
      border: 1px solid #D9D9D9;
      padding: 0 20px;
      border-radius: 4px;
      color: rgba(0, 0, 0, 0.85);
      &.active{
        color: rgba(65, 203, 137, 1);
        border: 1px solid rgba(65, 203, 137, 1);
      }
    }
  }
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #42b983;
    border-color: #42b983;
}
::v-deep .el-checkbox__inner:hover,::v-deep .el-checkbox__inner:focus{
  border-color: #42b983;
  outline-color:#42b983;
}
.name_word{
  color: #46a6ff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #41cb89;   // 进行修改背景和字体
  color: #fff;
}
.pagin{
  margin-top: 25px;
  text-align: right;
}
</style>
